<!--子级-->
<template>
  <div class="container">
    <el-table
      :data="tableList"
      border
      style="width: 100%"
      header-row-class-name="tableHeader"
    >
      <el-table-column prop="buyOrgName" label="买入金额前5营业部">
        <div class="orange" slot-scope="scope">{{ scope.row.buyOrgName }}</div>
      </el-table-column>
      <el-table-column prop="buyOrgBuyTotal" label="买入金额/元" width="100">
        <div
          slot-scope="scope"
          :style="{ color: colorFn(scope.row.buyOrgBuyTotal) }"
        >
          {{ scope.row.buyOrgBuyTotal | convert }}
        </div>
      </el-table-column>
      <el-table-column prop="buyOrgSellTotal" label="卖出金额/元" width="100">
        <div
          slot-scope="scope"
          :style="{ color: colorFn(scope.row.buyOrgSellTotal) }"
        >
          {{ scope.row.buyOrgSellTotal | convert }}
        </div>
      </el-table-column>
      <el-table-column prop="buyNetAmount" label="净额/元" width="95">
        <div
          slot-scope="scope"
          :style="{ color: colorFn(scope.row.buyNetAmount) }"
        >
          {{ scope.row.buyNetAmount | convert }}
        </div>
      </el-table-column>
      <el-table-column prop="sellOrgName" label="卖出金额前5营业部">
        <div class="orange" slot-scope="scope">
          {{ scope.row.sellOrgName }}
        </div></el-table-column
      >
      <el-table-column prop="sellOrgBuyTotal" label="买入金额/元" width="100">
        <div
          slot-scope="scope"
          :style="{ color: colorFn(scope.row.sellOrgBuyTotal) }"
        >
          {{ scope.row.sellOrgBuyTotal | convert }}
        </div>
      </el-table-column>
      <el-table-column prop="sellOrgSellTotal" label=" 卖出金额/元" width="100">
        <div
          slot-scope="scope"
          :style="{ color: colorFn(scope.row.sellOrgSellTotal) }"
        >
          {{ scope.row.sellOrgSellTotal | convert }}
        </div>
      </el-table-column>
      <el-table-column prop="sellNetAmount" label=" 净额/元2" width="95">
        <div
          slot-scope="scope"
          :style="{ color: colorFn(scope.row.sellNetAmount) }"
        >
          {{ scope.row.sellNetAmount | convert }}
        </div>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { unitFormat } from "../script/utils";
export default {
  props: ["tableList"],
  data() {
    return {};
  },
  filters: {
    // 万亿转换
    convert(val) {
      return unitFormat(val);
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 展示css
    colorFn(val) {
      if (val > 0) {
        return "red";
      } else {
        return "green";
      }
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
@import "../style/table.scss";
.container {
  .orange {
    color: #ff911b;
  }
  /deep/.el-table td {
    padding: 6px 0;
  }
  /deep/ .el-table {
    .tableHeader {
      background: linear-gradient(0deg, #22252d, #414a5a);
    }
  }
}
</style>
